define(['app'], function(app){
    'use strict';
    app.run(['config', '$css', function(config, $css, $rootScope){
            //do something for this module
            $css.add('module/moduleMobile/config/style.css');
        }
    ])
    .directive('kmiTabContenters', function ($swipe) {
        return {
            restrict : 'C',
            scope : {
                contenterData:'=',
                contentChanged:'&'
            },
            compile : function(tElem, tAttrs){
                var content = tElem[0].getElementsByClassName('tab-contenter')[0];
                content.setAttribute('ng-repeat', 'status in '+tAttrs.contenterData);
                //content.setAttribute('ng-swipe-left', 'changeTab($index+1);');
                //content.setAttribute('ng-swipe-right', 'changeTab($index-1);');
                return {
                    pre: function($scope, $elem, $attr){
                        var position = {}, position_info;
                        $scope.index = 0;
                        $scope.contenterData.forEach(function(data, index){
                            if(data.select){
                                $scope.index = index;
                            }
                        });
                        if(!$scope.index){
                            $scope.index = 0;
                            $scope.contenterData[$scope.index].select = true;
                        }
                        $scope.$watch('contenterData',function(newVals){
                            newVals.forEach(function(data, index){
                                if(data.select){
                                    $scope.index = index;
                                }
                            });
                            $elem[0].scrollLeft = $elem[0].getElementsByClassName('kmi-list')[$scope.index].offsetLeft;
                        }, true);
                        $swipe.bind($elem, {
                            start:function(coords){
                                position.scrollX = $elem[0].scrollLeft;
                                position_info = $elem[0].getElementsByClassName('kmi-list')[$scope.index];
                                position.startX = coords.x;
                            },
                            move:function(coords){
                                var moveX = position.scrollX + (position.startX - coords.x);
                                if(moveX > position_info.offsetLeft - position_info.clientWidth
                                    || moveX < position_info.offsetLeft + position_info.clientWidth)
                                $elem[0].scrollLeft = position.scrollX + (position.startX - coords.x);
                            },
                            end:function(coords){
                                var moveX = position.startX - coords.x;
                                if(moveX>50){
                                    if($scope.index<$scope.contenterData.length-1)
                                        $scope.index++;
                                } else if(moveX<-50){
                                    if($scope.index>0)
                                        $scope.index = $scope.index-1;
                                }
                                $elem[0].scrollLeft = $elem[0].getElementsByClassName('kmi-list')[$scope.index].offsetLeft;
                                $scope.contenterData.forEach(function(data, index){
                                    if($scope.index == index){
                                        data.select = true;
                                    } else {
                                        data.select = false;
                                    }
                                });
                                $scope.$apply();
                                //$scope.contentChanged({stauts:$scope.contenterData[$scope.index]});
                            },
                            cancel:function(){
                                $elem[0].scrollLeft = $elem[0].getElementsByClassName('kmi-list')[$scope.index].offsetLeft;
                                $scope.contenterData.forEach(function(data, index){
                                    if($scope.index == index){
                                        data.select = true;
                                    } else {
                                        data.select = false;
                                    }
                                });
                                $scope.$apply();
                            }
                        });
                        /*
                        $scope.changeTab = function(index){
                            if(index>=0 || index <= $scope.contenterData.length){
                                //$scope.mode = status.value;
                                var position_info = $elem[0].getElementsByClassName('kmi-list')[index];
                                $elem[0].scrollTo(position_info.offsetLeft, 0);
                                $scope.contentChanged({stauts:$scope.contenterData[index]});
                            }
                        };
                        */
                    }
                };
            }
        };
    })
    /*
    .directive('systemInfo', function(RouterExtendProvider, $rootScope){
        return {
            restrict : 'C',
            controller: function($scope, config){
                $scope.user_name = config.cache.name;
                $scope.openMail = function(){
                    $rootScope.loadSideSubMenu(undefined, {mode:'mailbox'});
                };
                $scope.getStatus = function(){
                    return RouterExtendProvider.sideTools[0].class;
                };
                $scope.getDot = function(){
                    return RouterExtendProvider.sideTools[0].dot;
                };
            },
            compile : function(tElem, tAttrs){
                var _html = '<div class="kmi-row-fields">';
                _html +=     '<div class="column-item left">';
                _html +=         '<img src="image/icons/person.png"></img> ';
                _html +=         '<label ng-bind="user_name" style="line-height:30px;"></label>';
                _html +=     '</div>';
                _html +=     '<div class="column-item right" ng-click="openMail();" ng-class="getStatus()">';
                _html +=         '<i class="material-icons">mail</i>';
                _html +=         '<label ng-bind="getDot();" style="line-height:30px;padding-left:4px;"></label>';
                _html +=     '</div>';
                _html += '</div>';
                tElem.prepend(_html);
                return {};
            }
        };
    });*/
});
